<template>
  <div>
    <div class="mydiv">
      <el-tree
        :props="props"
        :load="loadNode"
        :check-on-click-node="true"
        lazy
        ref="tree"
        node-key="path"
        @check="nodeClick"
        show-checkbox
        :check-strictly="true"
      ></el-tree>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="clickDirPath" size="mini">确 定</el-button>
    </span>
  </div>
</template>
<script>
export default {
  props: {
    keyName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      input: "",
      props: {
        label: "label",
        children: "children",
        isLeaf: "isLeaf",
        path: "path",
      },
    };
  },
  methods: {
    clickDirPath() {
      var dirpath = { name: this.keyName, value: this.input };
      this.$emit("close", dirpath);
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.$http.Get(this.$api.dirlist, {}, (res) => {
          return resolve(res);
        });
      } else {
        this.$http.Get(
          this.$api.dirlist,
          { dir: node.data.path },
          (res) => {
            return resolve(res);
          }
        );
      }
    },
    nodeClick(data, node) {
      console.log(data);
      console.log(node);
      this.$refs.tree.setCheckedNodes([data]);
      this.input = data.path;
    },
  },
};
</script>